<!-- 生产计划页 -->
<template>
  <div class="app-container">
    <main class="main-content">
      <!-- 模块导航 -->
      <div class="mb-8">
        <div class="flex flex-wrap gap-4">
          <button 
            id="ocr-tab" 
            class="module-tab px-6 py-2 rounded-lg flex items-center space-x-2 hover-lift"
            :class="activeTab === 'ocr' ? 'bg-primary text-white' : 'bg-white text-gray-700'"
            @click="switchTab('ocr')"
          >
            <i class="fa fa-qrcode"></i>
            <span>OCR扫描</span>
          </button>
          <button 
            id="plan-tab" 
            class="module-tab px-6 py-2 rounded-lg flex items-center space-x-2 hover-lift"
            :class="activeTab === 'plan' ? 'bg-primary text-white' : 'bg-white text-gray-700'"
            @click="switchTab('plan')"
          >
            <i class="fa fa-calendar-check-o"></i>
            <span>计划管理</span>
          </button>
          <button 
            id="material-tab" 
            class="module-tab px-6 py-2 rounded-lg flex items-center space-x-2 hover-lift"
            :class="activeTab === 'material' ? 'bg-primary text-white' : 'bg-white text-gray-700'"
            @click="switchTab('material')"
          >
            <i class="fa fa-truck"></i>
            <span>计划领料</span>
          </button>
          <button 
            id="process-tab" 
            class="module-tab px-6 py-2 rounded-lg flex items-center space-x-2 hover-lift"
            :class="activeTab === 'process' ? 'bg-primary text-white' : 'bg-white text-gray-700'"
            @click="switchTab('process')"
          >
            <i class="fa fa-cogs"></i>
            <span>工艺生产过程</span>
          </button>
        </div>
      </div>

      <!-- OCR扫描模块 -->
      <div v-show="activeTab === 'ocr'" id="ocr-module" class="module-content">
        <div class="bg-white rounded-xl p-6 card-shadow mb-6">
          <h2 class="text-xl font-bold mb-4 flex items-center">
            <i class="fa fa-qrcode text-primary mr-2"></i>
            OCR扫描管理
          </h2>

          <div class="grid md:grid-cols-2 gap-6">
            <!-- 扫描区域 -->
            <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary transition-custom">
              <div class="text-gray-400 mb-4">
                <i class="fa fa-camera text-5xl mb-2"></i>
                <p>点击上传或扫描委外计划转移单</p>
              </div>
              <!-- 文件上传按钮 - 实际点击的是隐藏的input -->
              <button id="upload-btn" class="bg-primary text-white px-4 py-2 rounded-lg flex items-center mx-auto" @click="triggerFileUpload">
                <i class="fa fa-upload mr-2"></i>
                选择文件上传
              </button>
              <input type="file" id="file-upload" accept=".jpg,.jpeg,.png,.pdf" class="hidden" ref="fileInput" @change="handleFileUpload" />
              <p class="text-gray-500 text-sm mt-2">支持JPG、PNG、PDF格式</p>

              <!-- 扫描按钮 -->
              <button id="scan-btn" class="mt-4 bg-secondary text-white px-4 py-2 rounded-lg flex items-center mx-auto" @click="startScan">
                <i class="fa fa-qrcode mr-2"></i>
                扫描二维码/条形码
              </button>
            </div>

            <!-- 扫描历史 -->
            <div>
              <h3 class="font-semibold mb-3 flex items-center justify-between">
                <span>最近扫描记录</span>
                <a href="#" id="view-all-history" class="text-primary text-sm" @click.prevent="viewAllHistory">查看全部</a>
              </h3>
              <div class="space-y-3 max-h-60 overflow-y-auto pr-2">
                <!-- 记录项 - 添加点击事件 -->
                <div 
                  v-for="record in scanHistory.records" 
                  :key="record.id"
                  class="border border-gray-200 rounded-lg p-3 hover:border-primary transition-custom cursor-pointer scan-history-item"
                  :data-id="record.id"
                  @click="loadScanRecord(record)"
                >
                  <div class="flex justify-between items-start">
                    <div>
                      <p class="font-medium">{{ record.orderNo }}</p>
                      <p class="text-sm text-gray-500">扫描时间: {{ record.scanTime }}</p>
                    </div>
                    <span 
                      class="text-xs px-2 py-1 rounded-full" 
                      :class="{
                        'bg-success/10 text-success': record.status === '已确认',
                        'bg-warning/10 text-warning': record.status === '待确认',
                        'bg-danger/10 text-danger': record.status === '不匹配'
                      }"
                    >
                      {{ record.status }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 识别结果编辑区 -->
        <div class="bg-white rounded-xl p-6 card-shadow">
          <h3 class="font-semibold mb-4">识别结果编辑</h3>

          <div class="mb-4 flex justify-between items-center">
            <div>
              <p class="font-medium">{{ currentScanRecord?.orderNo }}</p>
              <p class="text-sm text-gray-500">供应商: {{ currentScanRecord?.supplier }}</p>
            </div>
            <div class="flex space-x-2">
              <button id="print-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg transition-custom" @click="printDocument">
                <i class="fa fa-print mr-1"></i> 打印
              </button>
              <button id="remind-btn" class="bg-danger hover:bg-danger/90 text-white px-4 py-2 rounded-lg transition-custom" @click="sendReminder">
                <i class="fa fa-exclamation-triangle mr-1"></i> 发送提醒
              </button>
              <button id="confirm-btn" class="bg-success hover:bg-success/90 text-white px-4 py-2 rounded-lg transition-custom" @click="confirmStorage">
                <i class="fa fa-check mr-1"></i> 确认入库
              </button>
            </div>
          </div>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">物料编号</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">物料名称</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">规格型号</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单位</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">识别状态</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="(material, index) in currentScanMaterials" :key="index">
                  <td class="px-4 py-3 whitespace-nowrap">
                    <input type="text" v-model="material.matNo" class="border border-gray-300 rounded px-2 py-1 text-sm w-full">
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap">
                    <input type="text" v-model="material.matName" class="border border-gray-300 rounded px-2 py-1 text-sm w-full">
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap">
                    <input type="text" v-model="material.spec" class="border border-gray-300 rounded px-2 py-1 text-sm w-full">
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap">
                    <input type="text" v-model="material.unit" class="border border-gray-300 rounded px-2 py-1 text-sm w-full">
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap">
                    <input 
                      type="text" 
                      v-model="material.qty" 
                      class="border rounded px-2 py-1 text-sm w-full"
                      :class="material.recogStatus === '待确认' ? 'border-warning' : 'border-gray-300'"
                    >
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap">
                    <span 
                      class="text-xs px-2 py-1 rounded-full"
                      :class="{
                        'bg-success/10 text-success': material.recogStatus === '匹配',
                        'bg-warning/10 text-warning': material.recogStatus === '待确认',
                        'bg-danger/10 text-danger': material.recogStatus === '不匹配'
                      }"
                    >
                      {{ material.recogStatus }}
                    </span>
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm">
                    <button 
                      class="text-primary hover:text-primary/80 edit-item"
                      @click="toggleEditMaterial(index)"
                    >
                      <i :class="editingMaterialIndex === index ? 'fa fa-check' : 'fa fa-edit'"></i>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- 计划管理模块 -->
      <div v-show="activeTab === 'plan'" id="plan-module" class="module-content">
        <div class="bg-white rounded-xl p-6 card-shadow mb-6">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold flex items-center">
              <i class="fa fa-calendar-check-o text-primary mr-2"></i>
              生产计划管理
            </h2>
            <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center transition-custom">
              <i class="fa fa-plus mr-2"></i>
              创建新计划
            </button>
          </div>

          <!-- 筛选条件 -->
          <div class="grid md:grid-cols-4 gap-4 mb-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">计划编号</label>
              <input type="text" placeholder="请输入计划编号" class="w-full border border-gray-300 rounded-lg px-3 py-2" v-model="planFilters.planNo">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">计划状态</label>
              <select class="w-full border border-gray-300 rounded-lg px-3 py-2" v-model="planFilters.status">
                <option value="">全部状态</option>
                <option value="draft">草稿</option>
                <option value="pending">待审核</option>
                <option value="approved">已批准</option>
                <option value="in_progress">执行中</option>
                <option value="completed">已完成</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">创建日期</label>
              <input type="date" class="w-full border border-gray-300 rounded-lg px-3 py-2" v-model="planFilters.createDate">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">物料名称</label>
              <input type="text" placeholder="请输入物料名称" class="w-full border border-gray-300 rounded-lg px-3 py-2" v-model="planFilters.matName">
            </div>
          </div>

          <!-- 计划列表 -->
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">计划编号</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">物料名称</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">计划数量</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建人</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建日期</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="plan in productionPlans.plans" :key="plan.planNo" class="hover:bg-gray-50 transition-custom">
                  <td class="px-4 py-3 whitespace-nowrap">{{ plan.planNo }}</td>
                  <td class="px-4 py-3 whitespace-nowrap">{{ plan.matName }}</td>
                  <td class="px-4 py-3 whitespace-nowrap">{{ plan.planQty }}</td>
                  <td class="px-4 py-3 whitespace-nowrap">{{ plan.creator }}</td>
                  <td class="px-4 py-3 whitespace-nowrap">{{ plan.createDate }}</td>
                  <td class="px-4 py-3 whitespace-nowrap">
                    <span 
                      class="text-xs px-2 py-1 rounded-full"
                      :class="{
                        'bg-success/10 text-success': plan.status === '已批准',
                        'bg-warning/10 text-warning': plan.status === '待审核',
                        'bg-blue-100 text-blue-600': plan.status === '执行中'
                      }"
                    >
                      {{ plan.status }}
                    </span>
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm">
                    <button class="text-primary hover:text-primary/80 mr-3"><i class="fa fa-eye"></i> 查看</button>
                    <button class="text-gray-600 hover:text-gray-900"><i class="fa fa-edit"></i> 编辑</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- 分页 -->
          <div class="mt-6 flex justify-between items-center">
            <p class="text-sm text-gray-500">显示 1 至 {{ productionPlans.plans.length }} 条，共 {{ productionPlans.total }} 条记录</p>
            <div class="flex space-x-1">
              <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:border-primary hover:text-primary">
                <i class="fa fa-angle-left"></i>
              </button>
              <button class="w-8 h-8 flex items-center justify-center rounded bg-primary text-white">1</button>
              <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:border-primary hover:text-primary">2</button>
              <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:border-primary hover:text-primary">3</button>
              <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:border-primary hover:text-primary">
                <i class="fa fa-angle-right"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- 工艺流程卡查看 -->
        <div class="bg-white rounded-xl p-6 card-shadow">
          <h3 class="font-semibold mb-4 flex items-center">
            <i class="fa fa-file-text-o text-primary mr-2"></i>
            工艺流程卡查看
          </h3>

          <div class="border border-gray-200 rounded-lg overflow-hidden">
            <div class="bg-gray-50 px-4 py-3 border-b border-gray-200">
              <div class="flex flex-wrap justify-between gap-4">
                <div>
                  <p class="font-medium">工艺流程卡 #PROC-2023-012</p>
                  <p class="text-sm text-gray-500">物料名称: 精密轴承 6205-ZZ</p>
                </div>
                <div class="flex space-x-2">
                  <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1 rounded text-sm transition-custom">
                    <i class="fa fa-print mr-1"></i> 打印
                  </button>
                  <button class="bg-primary hover:bg-primary/90 text-white px-3 py-1 rounded text-sm transition-custom">
                    <i class="fa fa-download mr-1"></i> 导出
                  </button>
                </div>
              </div>
            </div>

            <div class="p-4">
              <table class="min-w-full divide-y divide-gray-200">
                <thead>
                  <tr>
                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工序编号</th>
                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工序名称</th>
                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">加工设备</th>
                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">加工要求</th>
                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">预计工时</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr>
                    <td class="px-4 py-3 whitespace-nowrap">PROC-001</td>
                    <td class="px-4 py-3 whitespace-nowrap">内圈加工</td>
                    <td class="px-4 py-3 whitespace-nowrap">CNC车床 #L-001</td>
                    <td class="px-4 py-3">尺寸精度IT5级，表面粗糙度Ra0.8μm</td>
                    <td class="px-4 py-3 whitespace-nowrap">2小时/百个</td>
                  </tr>
                  <tr>
                    <td class="px-4 py-3 whitespace-nowrap">PROC-002</td>
                    <td class="px-4 py-3 whitespace-nowrap">外圈加工</td>
                    <td class="px-4 py-3 whitespace-nowrap">CNC车床 #L-002</td>
                    <td class="px-4 py-3">尺寸精度IT5级，表面粗糙度Ra0.8μm</td>
                    <td class="px-4 py-3 whitespace-nowrap">2.5小时/百个</td>
                  </tr>
                  <tr>
                    <td class="px-4 py-3 whitespace-nowrap">PROC-003</td>
                    <td class="px-4 py-3 whitespace-nowrap">热处理</td>
                    <td class="px-4 py-3 whitespace-nowrap">热处理炉 #H-001</td>
                    <td class="px-4 py-3">淬火温度850℃，回火温度180℃</td>
                    <td class="px-4 py-3 whitespace-nowrap">4小时/批次</td>
                  </tr>
                  <tr>
                    <td class="px-4 py-3 whitespace-nowrap">PROC-004</td>
                    <td class="px-4 py-3 whitespace-nowrap">磨加工</td>
                    <td class="px-4 py-3 whitespace-nowrap">磨床 #G-001</td>
                    <td class="px-4 py-3">尺寸精度IT3级，表面粗糙度Ra0.4μm</td>
                    <td class="px-4 py-3 whitespace-nowrap">3小时/百个</td>
                  </tr>
                  <tr>
                    <td class="px-4 py-3 whitespace-nowrap">PROC-005</td>
                    <td class="px-4 py-3 whitespace-nowrap">装配</td>
                    <td class="px-4 py-3 whitespace-nowrap">装配台 #A-001</td>
                    <td class="px-4 py-3">清洁度等级16/14，旋转灵活性≤1.5N</td>
                    <td class="px-4 py-3 whitespace-nowrap">1.5小时/百个</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!-- 计划领料模块 -->
      <div v-show="activeTab === 'material'" id="material-module" class="module-content">
        <div class="bg-white rounded-xl p-6 card-shadow mb-6">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold flex items-center">
              <i class="fa fa-truck text-primary mr-2"></i>
              计划领料管理
            </h2>
            <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg flex items-center transition-custom">
              <i class="fa fa-plus mr-2"></i>
              新增领料单
            </button>
          </div>

          <!-- 领料单列表 -->
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">领料单号</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">关联计划</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">领料人</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">领料日期</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="requisition in materialRequisitions.requisitions" :key="requisition.reqNo" class="hover:bg-gray-50 transition-custom">
                  <td class="px-4 py-3 whitespace-nowrap">{{ requisition.reqNo }}</td>
                  <td class="px-4 py-3 whitespace-nowrap">{{ requisition.relatedPlan }}</td>
                  <td class="px-4 py-3 whitespace-nowrap">{{ requisition.requester }}</td>
                  <td class="px-4 py-3 whitespace-nowrap">{{ requisition.reqDate }}</td>
                  <td class="px-4 py-3 whitespace-nowrap">
                    <span 
                      class="text-xs px-2 py-1 rounded-full"
                      :class="{
                        'bg-success/10 text-success': requisition.status === '已领料',
                        'bg-warning/10 text-warning': requisition.status === '待领料'
                      }"
                    >
                      {{ requisition.status }}
                    </span>
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm">
                    <button class="text-primary hover:text-primary/80 mr-3"><i class="fa fa-eye"></i> 查看</button>
                    <button class="text-gray-600 hover:text-gray-900" v-if="requisition.status === '待领料'">
                      <i class="fa fa-edit"></i> 编辑
                    </button>
                    <button class="text-gray-600 hover:text-gray-900" v-else>
                      <i class="fa fa-print"></i> 打印
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- 领料详情 -->
        <div class="bg-white rounded-xl p-6 card-shadow">
          <div class="flex justify-between items-center mb-4">
            <h3 class="font-semibold flex items-center">
              <i class="fa fa-file-text-o text-primary mr-2"></i>
              领料单详情
            </h3>
            <div class="flex space-x-2">
              <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1 rounded text-sm transition-custom">
                <i class="fa fa-print mr-1"></i> 打印
              </button>
              <button class="bg-success hover:bg-success/90 text-white px-3 py-1 rounded text-sm transition-custom">
                <i class="fa fa-check mr-1"></i> 确认领料
              </button>
            </div>
          </div>

          <div class="grid md:grid-cols-3 gap-6 mb-6">
            <div class="border border-gray-200 rounded-lg p-4">
              <h4 class="text-sm font-medium text-gray-500 mb-2">基本信息</h4>
              <div class="space-y-2">
                <p><span class="text-gray-500">领料单号:</span> <span class="font-medium">MAT-REQ-046</span></p>
                <p><span class="text-gray-500">关联计划:</span> <span class="font-medium">PLN-2023-046</span></p>
                <p><span class="text-gray-500">领料部门:</span> <span class="font-medium">机加工车间</span></p>
                <p><span class="text-gray-500">领料日期:</span> <span class="font-medium">2023-05-12</span></p>
              </div>
            </div>

            <div class="border border-gray-200 rounded-lg p-4">
              <h4 class="text-sm font-medium text-gray-500 mb-2">领料人信息</h4>
              <div class="space-y-2">
                <p><span class="text-gray-500">领料人:</span> <span class="font-medium">李四</span></p>
                <p><span class="text-gray-500">工号:</span> <span class="font-medium">EMP-00245</span></p>
                <p><span class="text-gray-500">联系电话:</span> <span class="font-medium">138****5678</span></p>
              </div>
            </div>

            <div class="border border-gray-200 rounded-lg p-4">
              <h4 class="text-sm font-medium text-gray-500 mb-2">生产设备信息</h4>
              <div class="space-y-2">
                <p><span class="text-gray-500">设备编号:</span> <span class="font-medium">EQP-0012</span></p>
                <p><span class="text-gray-500">设备名称:</span> <span class="font-medium">CNC车床 #L-002</span></p>
                <p><span class="text-gray-500">设备位置:</span> <span class="font-medium">机加工车间A区</span></p>
              </div>
            </div>
          </div>

          <!-- 领料物料明细 -->
          <div>
            <h4 class="font-medium mb-3">领料物料明细</h4>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead>
                  <tr>
                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">物料编号</th>
                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">物料名称</th>
                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">规格型号</th>
                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单位</th>
                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请数量</th>
                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">实发数量</th>
                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">领料方式</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr>
                    <td class="px-4 py-3 whitespace-nowrap">MAT-2023-002</td>
                    <td class="px-4 py-3 whitespace-nowrap">密封垫片</td>
                    <td class="px-4 py-3 whitespace-nowrap">M20</td>
                    <td class="px-4 py-3 whitespace-nowrap">片</td>
                    <td class="px-4 py-3 whitespace-nowrap">500</td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <input type="number" value="500" class="border border-gray-300 rounded px-2 py-1 text-sm w-20">
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                      <select class="border border-gray-300 rounded px-2 py-1 text-sm">
                        <option value="bundle">按捆数</option>
                        <option value="piece">按支数</option>
                      </select>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!-- 工艺生产过程模块 -->
      <div v-show="activeTab === 'process'" id="process-module" class="module-content">
        <div class="bg-white rounded-xl p-6 card-shadow mb-6">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold flex items-center">
              <i class="fa fa-cogs text-primary mr-2"></i>
              工艺生产过程管理
            </h2>
            <div class="relative">
              <select class="appearance-none border border-gray-300 rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary/50" v-model="selectedProcessPlan">
                <option value="">全部生产计划</option>
                <option v-for="plan in processSteps.plans" :key="plan.planNo" :value="plan.planNo">
                  {{ plan.planNo }} - {{ plan.matName.split(' ')[0] }}
                </option>
              </select>
              <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                <i class="fa fa-chevron-down text-xs"></i>
              </div>
            </div>
          </div>

          <!-- 生产进度概览 -->
          <div class="mb-8" v-if="currentProcessPlan">
            <div class="flex justify-between items-center mb-4">
              <h3 class="font-semibold">生产进度概览</h3>
              <div>
                <span class="text-sm font-medium">总进度: {{ currentProcessPlan.progress }}%</span>
              </div>
            </div>

            <!-- 进度条 -->
            <div class="w-full bg-gray-200 rounded-full h-2.5 mb-6">
              <div class="bg-primary h-2.5 rounded-full" :style="{ width: currentProcessPlan.progress + '%' }"></div>
            </div>

            <!-- 生产信息卡片 -->
            <div class="grid md:grid-cols-4 gap-4">
              <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <p class="text-sm text-gray-500 mb-1">计划数量</p>
                <p class="text-2xl font-bold">{{ currentProcessPlan.planQty }} 个</p>
              </div>
              <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <p class="text-sm text-gray-500 mb-1">已完成数量</p>
                <p class="text-2xl font-bold text-success">{{ currentProcessPlan.completedQty }} 个</p>
              </div>
              <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <p class="text-sm text-gray-500 mb-1">开始日期</p>
                <p class="text-lg font-medium">{{ currentProcessPlan.startDate }}</p>
              </div>
              <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <p class="text-sm text-gray-500 mb-1">预计完成日期</p>
                <p class="text-lg font-medium">{{ currentProcessPlan.endDate }}</p>
              </div>
            </div>
          </div>

          <!-- 工艺步骤列表 -->
          <div v-if="currentProcessPlan">
            <h3 class="font-semibold mb-4">工艺步骤执行情况</h3>

            <div class="space-y-4">
              <!-- 工序 -->
              <div 
                v-for="(step, index) in currentProcessPlan.steps" 
                :key="step.stepNo"
                class="border rounded-lg overflow-hidden"
                :class="{
                  'border-gray-200': step.status === '未开始',
                  'border-primary shadow-md': step.status === '进行中',
                  'border-gray-200 opacity-60': step.status === '未开始'
                }"
              >
                <div 
                  class="px-4 py-3 border-b flex justify-between items-center"
                  :class="{
                    'bg-gray-50 border-gray-200': step.status === '未开始' || step.status === '已完成',
                    'bg-primary/5 border-primary/20': step.status === '进行中'
                  }"
                >
                  <div class="flex items-center">
                    <div 
                      class="w-8 h-8 rounded-full flex items-center justify-center text-white mr-3"
                      :class="{
                        'bg-gray-300': step.status === '未开始',
                        'bg-success': step.status === '已完成',
                        'bg-primary': step.status === '进行中'
                      }"
                    >
                      <i 
                        v-if="step.status === '已完成'" 
                        class="fa fa-check"
                      ></i>
                      <i 
                        v-else-if="step.status === '进行中'" 
                        class="fa fa-cog fa-spin"
                      ></i>
                      <i 
                        v-else 
                        class="fa fa-lock"
                      ></i>
                    </div>
                    <div>
                      <p class="font-medium">{{ step.stepName }} ({{ step.stepNo }})</p>
                      <p class="text-sm text-gray-500">{{ step.equipment }} · {{ getStepStatusText(step) }}</p>
                    </div>
                  </div>
                  <span 
                    class="text-xs px-2 py-1 rounded-full"
                    :class="{
                      'bg-gray-200 text-gray-600': step.status === '未开始',
                      'bg-success/10 text-success': step.status === '已完成',
                      'bg-blue-100 text-blue-600': step.status === '进行中'
                    }"
                  >
                    {{ step.status }}
                  </span>
                </div>

                <div class="p-4" v-if="step.status !== '未开始'">
                  <div class="grid md:grid-cols-3 gap-4 mb-4">
                    <div>
                      <p class="text-sm text-gray-500 mb-1">操作人员</p>
                      <p class="font-medium">{{ step.operator || '-' }}</p>
                    </div>
                    <div>
                      <p class="text-sm text-gray-500 mb-1">完成数量</p>
                      <p class="font-medium">
                        <span v-if="step.status === '进行中'">{{ step.completedQty }} / {{ currentProcessPlan.planQty }} 个</span>
                        <span v-else>{{ step.completedQty }} 个</span>
                      </p>
                    </div>
                    <div>
                      <p class="text-sm text-gray-500 mb-1">
                        {{ step.status === '进行中' ? '已用工时' : '实际工时' }}
                      </p>
                      <p class="font-medium">{{ step.actualHours }} 小时</p>
                    </div>
                  </div>

                  <div class="mb-4" v-if="step.status === '进行中'">
                    <p class="text-sm text-gray-500 mb-1">进度</p>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div class="bg-primary h-2 rounded-full" :style="{ width: (step.completedQty / currentProcessPlan.planQty * 100) + '%' }"></div>
                    </div>
                  </div>

                  <div v-if="step.record">
                    <p class="text-sm text-gray-500 mb-1">加工记录</p>
                    <p class="text-sm">{{ step.record }}</p>
                  </div>

                  <div class="mt-4" v-if="step.status === '进行中'">
                    <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm transition-custom">
                      <i class="fa fa-check mr-1"></i> 标记完成
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 通知组件 -->
    <div v-if="notification.show" 
      class="fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg z-50 transition-all duration-300 transform"
      :class="[
        notification.type === 'success' ? 'bg-success text-white' : 
        notification.type === 'error' ? 'bg-danger text-white' : 
        notification.type === 'warning' ? 'bg-warning text-white' : 
        'bg-primary text-white',
        notification.show ? 'translate-y-0 opacity-100' : 'translate-y-[-20px] opacity-0'
      ]"
    >
      <i 
        :class="[
          notification.type === 'success' ? 'fa fa-check-circle mr-2' : 
          notification.type === 'error' ? 'fa fa-exclamation-circle mr-2' : 
          notification.type === 'warning' ? 'fa fa-exclamation-triangle mr-2' : 
          'fa fa-info-circle mr-2'
        ]"
      ></i>
      {{ notification.message }}
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'

// 路由
const router = useRouter()

// 返回到仪表盘的函数（可选）
const backToDashboard = () => {
  router.push('/')
}

// 当前激活的标签页
const activeTab = ref('ocr')

// 切换标签页
const switchTab = (tab) => {
  activeTab.value = tab
}

// 通知状态
const notification = reactive({
  show: false,
  message: '',
  type: 'info'
})

// 显示通知
const showNotification = (message, type = 'info') => {
  notification.message = message
  notification.type = type
  notification.show = true
  
  setTimeout(() => {
    notification.show = false
  }, 3000)
}

// 文件上传相关
const fileInput = ref(null)

const triggerFileUpload = () => {
  fileInput.value.click()
}

const handleFileUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    showNotification(`文件已选择: ${file.name}`, 'info')
    
    // 模拟OCR处理
    setTimeout(() => {
      showNotification('OCR识别完成，已加载结果', 'success')
    }, 2000)
  }
}

// 扫描功能
const startScan = () => {
  showNotification('正在启动扫描设备...', 'info')
  
  // 模拟扫描过程
  setTimeout(() => {
    showNotification('扫描完成，正在识别...', 'info')
    
    // 模拟识别过程
    setTimeout(() => {
      showNotification('识别成功，已更新结果', 'success')
    }, 1500)
  }, 1000)
}

// 查看全部历史记录
const viewAllHistory = () => {
  showNotification('正在加载所有扫描历史记录...', 'info')
  // 这里可以添加跳转到历史记录页面的逻辑
}

// 扫描历史数据
const scanHistory = ref({
  "records": [
    {
      "id": "W20230512",
      "orderNo": "委外计划转移单 #W20230512",
      "scanTime": "2023-05-12 09:30",
      "status": "已确认",
      "supplier": "上海精密部件有限公司",
      "materials": [
        { "matNo": "MAT-2023-001", "matName": "精密轴承", "spec": "6205-ZZ", "unit": "个", "qty": 1000, "recogStatus": "匹配" },
        { "matNo": "MAT-2023-002", "matName": "密封垫片", "spec": "M20", "unit": "片", "qty": 500, "recogStatus": "待确认" }
      ]
    },
    {
      "id": "W20230511",
      "orderNo": "委外计划转移单 #W20230511",
      "scanTime": "2023-05-11 14:15",
      "status": "待确认",
      "supplier": "上海精密部件有限公司",
      "materials": [
        { "matNo": "MAT-2023-003", "matName": "传动齿轮", "spec": "G300", "unit": "个", "qty": 300, "recogStatus": "匹配" }
      ]
    },
    {
      "id": "W20230510",
      "orderNo": "委外计划转移单 #W20230510",
      "scanTime": "2023-05-10 16:40",
      "status": "不匹配",
      "supplier": "北京五金配件厂",
      "materials": [
        { "matNo": "MAT-2023-004", "matName": "螺栓", "spec": "M16", "unit": "个", "qty": 2000, "recogStatus": "不匹配" }
      ]
    }
  ]
})

// 当前选中的扫描记录
const currentScanRecord = ref(scanHistory.value.records[0])
const currentScanMaterials = ref(scanHistory.value.records[0].materials)

// 加载扫描记录详情
const loadScanRecord = (record) => {
  currentScanRecord.value = record
  currentScanMaterials.value = [...record.materials]
  showNotification(`正在加载记录 ${record.orderNo} 的详情...`, 'info')
}

// 编辑物料状态
const editingMaterialIndex = ref(-1)

const toggleEditMaterial = (index) => {
  if (editingMaterialIndex.value === index) {
    // 保存编辑
    editingMaterialIndex.value = -1
    showNotification('修改已保存', 'success')
    
    // 检查数量是否有变动，如果有则更新状态
    const material = currentScanMaterials.value[index]
    if (material.recogStatus === '待确认') {
      material.recogStatus = '匹配'
    }
  } else {
    // 进入编辑状态
    editingMaterialIndex.value = index
    showNotification('请修改内容，完成后点击确认', 'info')
  }
}

// 打印文档
const printDocument = () => {
  showNotification('正在准备打印文档...', 'info')
  
  // 模拟打印过程
  setTimeout(() => {
    // 实际项目中使用window.print()
    showNotification('打印任务已发送到打印机', 'success')
  }, 1000)
}

// 发送提醒
const sendReminder = () => {
  showNotification('正在发送提醒通知...', 'info')
  
  // 模拟发送提醒
  setTimeout(() => {
    showNotification('提醒已发送给相关人员', 'success')
  }, 1000)
}

// 确认入库
const confirmStorage = () => {
  if (confirm('确定要确认这些物料入库吗？')) {
    showNotification('正在处理入库操作...', 'info')
    
    // 模拟入库过程
    setTimeout(() => {
      showNotification('入库操作已完成', 'success')
      
      // 更新当前记录状态为已确认
      currentScanRecord.value.status = '已确认'
      const recordIndex = scanHistory.value.records.findIndex(r => r.id === currentScanRecord.value.id)
      if (recordIndex !== -1) {
        scanHistory.value.records[recordIndex].status = '已确认'
      }
    }, 1500)
  }
}

// 生产计划数据
const productionPlans = ref({
  "plans": [
    {
      "planNo": "PLN-2023-045",
      "matName": "精密轴承",
      "planQty": "800个",
      "creator": "王车间主任",
      "createDate": "2023-05-10",
      "status": "已批准",
      "processCardNo": "PROC-2023-012",
      "startDate": "2023-05-11",
      "endDate": "2023-05-18"
    },
    {
      "planNo": "PLN-2023-046",
      "matName": "密封垫片",
      "planQty": "500片",
      "creator": "王车间主任",
      "createDate": "2023-05-11",
      "status": "待审核",
      "processCardNo": "PROC-2023-013",
      "startDate": "2023-05-13",
      "endDate": "2023-05-20"
    },
    {
      "planNo": "PLN-2023-047",
      "matName": "传动齿轮",
      "planQty": "300个",
      "creator": "李车间主任",
      "createDate": "2023-05-12",
      "status": "执行中",
      "processCardNo": "PROC-2023-014",
      "startDate": "2023-05-14",
      "endDate": "2023-05-21"
    }
  ],
  "total": 24,
  "pageSize": 3
})

// 计划筛选条件
const planFilters = reactive({
  planNo: '',
  status: '',
  createDate: '',
  matName: ''
})

// 领料单数据
const materialRequisitions = ref({
  "requisitions": [
    {
      "reqNo": "MAT-REQ-045",
      "relatedPlan": "PLN-2023-045",
      "requester": "张三",
      "reqDate": "2023-05-11",
      "status": "已领料",
      "dept": "机加工车间",
      "empNo": "EMP-00244",
      "phone": "138****1234",
      "equipment": { "eqpNo": "EQP-0011", "eqpName": "CNC车床 #L-001", "location": "机加工车间A区" },
      "materials": [
        { "matNo": "MAT-2023-001", "matName": "精密轴承", "spec": "6205-ZZ", "unit": "个", "applyQty": 800, "actualQty": 800, "pickType": "按个" }
      ]
    },
    {
      "reqNo": "MAT-REQ-046",
      "relatedPlan": "PLN-2023-046",
      "requester": "李四",
      "reqDate": "2023-05-12",
      "status": "待领料",
      "dept": "机加工车间",
      "empNo": "EMP-00245",
      "phone": "138****5678",
      "equipment": { "eqpNo": "EQP-0012", "eqpName": "CNC车床 #L-002", "location": "机加工车间A区" },
      "materials": [
        { "matNo": "MAT-2023-002", "matName": "密封垫片", "spec": "M20", "unit": "片", "applyQty": 500, "actualQty": 500, "pickType": "按捆数" }
      ]
    }
  ]
})

// 工艺步骤数据
const processSteps = ref({
  "plans": [
    {
      "planNo": "PLN-2023-045",
      "matName": "精密轴承 6205-ZZ",
      "planQty": 800,
      "completedQty": 480,
      "progress": 60,
      "startDate": "2023-05-11",
      "endDate": "2023-05-18",
      "steps": [
        {
          "stepNo": "PROC-001",
          "stepName": "内圈加工",
          "equipment": "CNC车床 #L-001",
          "status": "已完成",
          "completionTime": "2023-05-12",
          "operator": "张三",
          "completedQty": 800,
          "actualHours": 16,
          "record": "尺寸精度IT5级，表面粗糙度Ra0.8μm，抽检合格率100%"
        },
        {
          "stepNo": "PROC-002",
          "stepName": "外圈加工",
          "equipment": "CNC车床 #L-002",
          "status": "已完成",
          "completionTime": "2023-05-13",
          "operator": "李四",
          "completedQty": 800,
          "actualHours": 20,
          "record": "尺寸精度IT5级，表面粗糙度Ra0.8μm，抽检合格率99.5%"
        },
        {
          "stepNo": "PROC-003",
          "stepName": "热处理",
          "equipment": "热处理炉 #H-001",
          "status": "进行中",
          "completionTime": "",
          "operator": "王五",
          "completedQty": 480,
          "actualHours": 10,
          "record": "淬火温度850℃，回火温度180℃（进行中）"
        },
        {
          "stepNo": "PROC-004",
          "stepName": "磨加工",
          "equipment": "磨床 #G-001",
          "status": "未开始",
          "completionTime": "",
          "operator": "",
          "completedQty": 0,
          "actualHours": 0,
          "record": "尺寸精度IT3级，表面粗糙度Ra0.4μm"
        },
        {
          "stepNo": "PROC-005",
          "stepName": "装配",
          "equipment": "装配台 #A-001",
          "status": "未开始",
          "completionTime": "",
          "operator": "",
          "completedQty": 0,
          "actualHours": 0,
          "record": "清洁度等级16/14，旋转灵活性≤1.5N"
        }
      ]
    },
    {
      "planNo": "PLN-2023-046",
      "matName": "密封垫片 M20",
      "planQty": 500,
      "completedQty": 0,
      "progress": 0,
      "startDate": "2023-05-13",
      "endDate": "2023-05-20",
      "steps": [
        {
          "stepNo": "PROC-006",
          "stepName": "原料裁切",
          "equipment": "裁切机 #C-001",
          "status": "未开始",
          "completionTime": "",
          "operator": "",
          "completedQty": 0,
          "actualHours": 0,
          "record": "裁切尺寸误差≤±0.1mm"
        }
      ]
    }
  ]
})

// 选中的工艺计划
const selectedProcessPlan = ref('PLN-2023-045')

// 当前显示的工艺计划
const currentProcessPlan = computed(() => {
  return processSteps.value.plans.find(plan => plan.planNo === selectedProcessPlan.value) || processSteps.value.plans[0]
})

// 获取工序状态文本
const getStepStatusText = (step) => {
  if (step.status === '已完成') {
    return `已完成于 ${step.completionTime}`
  } else if (step.status === '进行中') {
    return '进行中'
  } else {
    return '未开始'
  }
}

// 物料库存数据
const materials = ref({
  "inventory": [
    { "matNo": "MAT-2023-001", "matName": "精密轴承", "spec": "6205-ZZ", "unit": "个", "stockQty": 2000 },
    { "matNo": "MAT-2023-002", "matName": "密封垫片", "spec": "M20", "unit": "片", "stockQty": 1500 },
    { "matNo": "MAT-2023-003", "matName": "传动齿轮", "spec": "G300", "unit": "个", "stockQty": 800 },
    { "matNo": "MAT-2023-004", "matName": "螺栓", "spec": "M16", "unit": "个", "stockQty": 5000 }
  ]
})

// 页面加载完成后执行
onMounted(() => {
  // 可以在这里添加初始化逻辑
})
</script>

<style scoped>
@import url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css');

body {
  font-family: 'Inter', 'system-ui', 'sans-serif';
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 主界面样式 */
.app-container {
  display: flex;
  min-height: 100vh;
  background-color: #f5f7fa;
  color: #333;
}

.main-content { 
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

.content-auto {
  content-visibility: auto;
}

.card-shadow {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.transition-custom {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* 自定义颜色类 */
.bg-primary { background-color: #165DFF; }
.text-primary { color: #165DFF; }
.hover\:text-primary:hover { color: #165DFF; }
.border-primary { border-color: #165DFF; }
.bg-secondary { background-color: #36CFC9; }
.text-secondary { color: #36CFC9; }
.bg-success { background-color: #52C41A; }
.text-success { color: #52C41A; }
.bg-warning { background-color: #FAAD14; }
.text-warning { color: #FAAD14; }
.bg-danger { background-color: #FF4D4F; }
.text-danger { color: #FF4D4F; }
.bg-gray-50 { background-color: #F5F5F5; }
.bg-gray-100 { background-color: #F5F5F5; }
.bg-gray-200 { background-color: #E5E5E5; }
.bg-gray-300 { background-color: #D4D4D4; }
.text-gray-500 { color: #737373; }
.text-gray-600 { color: #525252; }
.border-gray-200 { border-color: #E5E5E5; }
.border-gray-300 { border-color: #D4D4D4; }

/* 按钮状态 */
.bg-primary\/90 { background-color: #165DFFcc; }
.hover\:bg-primary\/90:hover { background-color: #165DFFcc; }
.hover\:bg-gray-300:hover { background-color: #E5E5E5; }
.hover\:bg-danger\/90:hover { background-color: #FF4D4Fcc; }
.hover\:bg-success\/90:hover { background-color: #52C41Acc; }

/* 状态徽章 */
.bg-success\/10 { background-color: #52C41A1a; }
.bg-warning\/10 { background-color: #FAAD141a; }
.bg-danger\/10 { background-color: #FF4D4F1a; }
.bg-blue-100 { background-color: #dbeafe; }
.text-blue-600 { color: #2563eb; }
.bg-primary\/5 { background-color: #165DFF0d; }
.border-primary\/20 { border-color: #165DFF33; }

/* 动画效果 */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
  --tw-translate-y: 0px;
}

.translate-y-\[-20px\] {
  --tw-translate-y: -20px;
}

.opacity-100 {
  opacity: 1;
}

.opacity-0 {
  opacity: 0;
}
</style>